<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多人聊天室</title>
    <style>
        /* 整体页面布局 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        /* 聊天窗口样式 */
        #chat-container {
            width: 80%;
            margin: 20px auto;
            background-color: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            overflow: hidden;
        }

        /* 聊天消息区域样式 */
        #chat-messages {
            height: 400px;
            overflow-y: scroll;
            padding: 10px;
        }

        /* 输入框和发送按钮样式 */
        #input-container {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ccc;
        }

        #message-input {
            flex: 1;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        #send-button {
            margin-left: 10px;
            padding: 5px 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        /* 消息样式 */
        .message {
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 3px;
        }

        /*
        类选择器  .类名
         */
        .system-message {
            background-color: #e0e0e0;
        }

        .user-message {
            background-color: #007BFF;
            color: white;
        }

        /* 用户列表样式 */
        #user-list {
            width: 20%;
            margin: 20px auto;
            background-color: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            overflow: hidden;
            float: left;
            margin-left: 20px;
        }

        #user-list h3 {
            background-color: #007BFF;
            color: white;
            padding: 5px;
            margin: 0;
        }

        #user-list ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #user-list li {
            padding: 5px;
            cursor: pointer;
        }

        #user-list li:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
<div id="user-list">
    <h3>在线用户</h3>
    <ul id="user-ul"></ul>
</div>
<div id="chat-container">
    <div id="chat-message" style="height: 550px; width: auto"></div>
    <div id="input-container">
        <input type="text" id="message-input" placeholder="请输入消息">
        <!--<input type="text" id="private-message-input" placeholder="请输入私信内容" style="display:none;">-->
        <button id="send-button" onclick="sendMessage()">发送</button>
        <!--<button id="private-send-button" onclick="sendPrivateMessage()" style="display: none;">发送私信</button>-->
    </div>
</div>

<script>
    //与服务器创建连接
    var socket = new WebSocket("ws://localhost:8080/chatRoomServer")
    var currentPrivateUer = null;

    //创建连接完成后，当连接打开时
    socket.onopen = function () {
        console.log("已连接服务器~")
    }

    //当接收到消息时
    //event  事件   用于用户和网页进行交互时产业的动作或者触发的一些条件
    //   例如：滑轮滚动     ctrl +  改变窗口的大小
    socket.onmessage = function (event) {
        var message = event.data;
        console.log(message);
        var messagesDiv = document.getElementById("chat-message");
        var messageDiv = document.createElement("div");
        if (message.startsWith("系统消息：")) {
            messageDiv.className = "system-message";
        } else if (message.startsWith("当前在线用户：")) {
            console.log(message + "=====================")
            var userList = message.split(":")[1].split(",");
            var userUl = document.getElementById("user-ul")
            userUl.innerHTML = "";
            console.log(userUl);
            console.log(userList);
            userList.forEach(function (user) {
                var li = document.createElement("li");
                li.textContent = String(user);//user-->String(user)
                li.addEventListener("click", function () {
                    //选择用户
                    selectPrivateUser(user);
                });
                userUl.appendChild(li);
            });
        } else {
            messageDiv.className = "user-message";
        }
        messageDiv.textContent = message;
        messagesDiv.appendChild(messageDiv);
        //滑轮滚动
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    };

    //当连接关闭时
    socket.onclose = function () {
        console.log("已从服务器断开连接~")
    }


    //发送消息函数
    function sendMessage() {
        var input = document.getElementById("message-input");
        var message = input.value;
        if (message !== "") {
            socket.send(message);
            input.value = "";
        }
    }

    /*//发送私信
    function sendPrivateMessage() {
        var input = document.getElementById("private-message-input");
        var message = input.value;
        if (message !== "" && currentPrivateUer) {
            socket.send(currentPrivateUer + ":" + message);
            input.value = "";
        }
    }*/

    /*//私信用户选择
    function selectPrivateUser(user) {
        console.log(user);
        currentPrivateUer = user;  // 私信用户
        document.getElementById("message-input").style.display = "none";
        document.getElementById("send-button").style.display = "none";
        document.getElementById("private-message-input").style.display = "block";
        document.getElementById("private-send-button").style.display = "block";
    }*/
</script>

</body>
</html>